<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script src="./js/echarts/echarts.5.0.0.js"></script>
		<script src="./js/echarts/theme/shine.js"></script>
		<title>EChartd地图</title>
	</head>
	<style>
		#chart {
			width: 800px;
			height: 400px;
			display: inline-block;
		}
	</style>
	<body>
		<div id="chart"></div>
	</body>
	<script>
		fetch('https://geo.datav.aliyun.com/areas_v2/bound/420000_full.json')
			.then(response => response.json())
			.then(data => {
				// 绘制地图板块
				echarts.registerMap('hubei', data);
				var center = {};
				data.features.forEach(item => {
					center[item.properties.name] = item.properties.center;
				});
				console.log(center);
				let options = {
					visualMap: {
						min: 0,
						max: 100,
						text: ['High', 'Low'],
						realtime: true,
						calculable: true,
						seriesIndex: [3], //指定取哪个系列的数据
						inRange: {
							color: ['#A5DCF4', '#006edd'], // 板块颜色渐变
						},
					},
					geo: [
						{
							map: 'hubei',
							zoom: 1.1, //默认显示级别
							scaleLimit: {
								//缩放级别
								min: 0,
								max: 3,
							},
							itemStyle: {
								normal: {
									areaColor: '#013C62',
									shadowColor: '#013C62',
									shadowBlur: 20,
									shadowOffsetX: -5,
									shadowOffsetY: 15,
								},
							},
						},
					],
					series: [
						{
							type: 'effectScatter',
							coordinateSystem: 'geo',
							data: [],
							symbolSize: 14,
							label: {
								normal: {
									show: true,
									formatter: function (params) {
										return '{fline|地点：' + params.data.city + '}\n{tline|' + (params.data.info || '发生xx集件') + '}';
									},
									position: 'top',
									backgroundColor: 'rgba(254,174,33,.8)',
									padding: [10, 10],
									borderRadius: 3,
									lineHeight: 32,
									color: '#f7fafb',
									rich: {
										fline: {
                      fontSize:50,
											padding: [0, 10, 10, 10],
											color: '#fff',
										},
										tline: {
                      fontSize:50,
											padding: [10, 10, 0, 10],
											color: '#fff',
										},
									},
								},
								emphasis: {
									show: true,
								},
							},
							itemStyle: {
                fontSize:200,
								color: '#f0f',
							},
						},
						{
							type: 'effectScatter',
							coordinateSystem: 'geo',
							data: [],
							symbolSize: 14,
							label: {
								normal: {
									show: true,
									formatter: function (params) {
										return '{fline|地点：' + params.data.city + '}\n{tline|' + (params.data.info || '发生xx集件') + '}';
									},
									position: 'top',
									backgroundColor: 'rgba(233,63,66,.9)',
									padding: [0, 0],
									borderRadius: 3,
									lineHeight: 32,
									color: '#ffffff',
									rich: {
										fline: {
											padding: [0, 10, 10, 10],
											color: '#ffffff',
										},
										tline: {
											padding: [10, 10, 0, 10],
											color: '#ffffff',
										},
									},
								},
								emphasis: {
									show: true,
								},
							},
							itemStyle: {
								color: '#e93f42',
							},
						},
						{
							type: 'effectScatter',
							coordinateSystem: 'geo',
							data: [],
							symbolSize: 14,
							label: {
								normal: {
									show: true,
									formatter: function (params) {
										return '{fline|地点：' + params.data.city + '}\n{tline|' + (params.data.info || '发生xx集件') + '}';
									},
									position: 'top',
									backgroundColor: 'rgba(8,186,236,.9)',
									padding: [0, 0],
									borderRadius: 3,
									lineHeight: 32,
									color: '#ffffff',
									rich: {
										fline: {
											padding: [0, 10, 10, 10],
											color: '#ffffff',
										},
										tline: {
											padding: [10, 10, 0, 10],
											color: '#ffffff',
										},
									},
								},
								emphasis: {
									show: true,
								},
							},
							itemStyle: {
								color: '#08baec',
							},
						},
						{
							type: 'map',
							mapType: 'hubei',
							geoIndex: -1,
							zoom: 1.1, //默认显示级别
							label: {
								// 地图板块文字默认样式
								show: true,
								color: '#ffffff',
								emphasis: {
									//地图板块文字hover 样式
									color: 'red',
									show: true,
								},
							},
							itemStyle: {
								normal: {
									// 地图板块默认样式
									borderColor: '#2980b9',
									borderWidth: 1,
									areaColor: '#12235c',
								},
								emphasis: {
									//地图板块hover 样式
									areaColor: '#FA8C16',
									borderWidth: 0,
									color: 'green',
								},
							},
							// 绘制地图
							data: Object.keys(center).map(name => {
								return {
									name: name,
									value: Math.random() * 100,
								};
							}),
						},
					],
				};
				echarts.init(document.getElementById('chart')).setOption(options);
				var timer = setInterval(() => {
					const _options = { ...options };
					for (var i = 0; i < 3; i++) {
						// 清空之前的闪点
						_options.series[i].data = [];
					}
					// 随机取闪点的市
					var cityIndex = Math.floor(Math.random() * 17);
					// 随机取闪点样式
					var runidx = Math.floor(Math.random() * 3);
					// 获取地区名字
					var coordCity = Object.keys(center)[cityIndex];
					// 获取地区经纬度
					var coord = center[coordCity];
					_options.series[runidx].data = [
						{
							city: coordCity,
							value: coord,
						},
					];
					options = _options;
					echarts.init(document.getElementById('chart')).setOption(options);
				}, 3000);
			});
	</script>
</html>
